<template>
  <div class="home flex-c-s flex-col">
    <van-field class="search" v-model="value" placeholder="请输入搜索关键词" />
    <div class="content-box flex-grow">
      <van-tag class="tags" plain type="primary" size="large" @click="go(item.path)" v-for="(item, index) in search(value)" :key="index">{{item.meta.title}}</van-tag>
      <div class="empty-box"></div>
    </div>
  </div>
</template>

<script>
import routes from "@/router"
export default {
  name: "home",
  data() {
    return {
      value: ""
    }
  },
  computed: {
    menus() {
      return routes.options.routes.filter((item) => {
        return item.meta && item.meta.title && item.meta.title !== "目录"
      })
    }
  },
  methods: {
    go(url) {
      this.$router.push(url)
    },
    /**
     * @description: 获取所有叶子节点
     * @param {type}
     * @return {type}
     * @author: syx
     */
    getChildren(nodes) {
      var r = []
      if (Array.isArray(nodes)) {
        for (var i = 0, l = nodes.length; i < l; i++) {
          const item = nodes[i]
          r.push(item) // 取每项数据放入一个新数组
          if (Array.isArray(item.children) && item.children.length > 0) {
            // 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
            r = r.concat(this.getChildren(item.children))
            item.children = [] //最后有children的 不可点击
          }
          // delete item[props.children]  注释掉此行代码 把children字段保留 用于 后面判断是否是最后一级
        }
      }
      return r
    },
    search(keywords) {
      return this.menus.filter((item) => {
        //  contain
        if (item.meta.title.includes(keywords)) {
          return item
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  .search {
    width: 100%;
  }
  .content-box {
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &::after {
      content: "";
      margin: 5px;
    }
    .tags {
      height: 60px;
      text-align: center;
      font-size: 16px;
      font-weight: bolder;
      margin: 5px;
      cursor: pointer;
      &:hover {
        color: blue;
      }
    }
    .empty-box {
      overflow: hidden;
      margin: 5px;
    }
  }
}
</style>
